<template>
  <div class="home">
    <ul class="nav">
      <li @click="flag = 0" :class="{ active: flag == 0 }">
        未读{{ num.num0 }}
      </li>
      <li @click="flag = 1" :class="{ active: flag == 1 }">
        已读{{ num.num1 }}
      </li>
      <li @click="flag = 2" :class="{ active: flag == 2 }">
        回收站{{ num.num2 }}
      </li>
    </ul>
    <com1 v-show="flag == 0" />
    <com2 v-show="flag == 1"></com2>
    <com3 v-show="flag == 2" />
  </div>
</template>

<script>
import com1 from "../components/Notdone.vue";
//引入已读子组件
import com2 from "../components/Finished.vue";
//引入未读子组件
import com3 from "../components/Trash.vue";
//引入 回收站子组件
export default {
  data() {
    return {
      flag: 0,
    };
  },
  mounted() {
    this.$axios.get("data.json").then((res) => {
      this.$store.commit("setdata", res.data.data);
    });
  },
  components: {
    com1,
    com2,
    com3,
  },
  computed: {
    num() {
      let num0 = this.$store.state.data.filter((item) => {
        return item.status == 0;
      }).length;
      //计算vuex中的未读的数量
      let num1 = this.$store.state.data.filter((item) => {
        return item.status == 1;
      }).length;
      let num2 = this.$store.state.data.filter((item) => {
        return item.status == 2;
      }).length;
      // return { num0: num0, num1: num1, num2: num2 };
      return { num0, num1, num2 };
    },
  },
};
</script>
<style lang="scss">
.home {
  width: 800px;
  margin: 100px auto;
}
.nav {
  display: flex;
  li {
    width: 200px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #ccc;
  }
  .active {
    border-bottom: 1px solid #67c23a;
    color: #67c23a;
  }
}
.list {
  li {
    width: 500px;
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
  }
}
</style>
